<template>
    <div>
          <!-- :on-success="handleAvatarSuccess" -->
        <el-upload
          :action="url"
          :headers = "headers"
          list-type="picture-card"
          :file-list="imgList"
          :on-success="handleAvatarSuccess"
          :on-remove="handleRemove"
          :before-upload="beforeAvatarUpload">
          <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Provide,Emit } from "vue-property-decorator";
import commonApi from "@/api/common";
@Component({
  components: {}
})
export default class supplierEditDialog extends Vue {
  // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
  @Provide() headers: any = {token:localStorage.getItem("tsToken")};//上传图片请求头
  @Provide() url: string = process.env.VUE_APP_URL+'manage/demo/index/upload';
  @Prop() imgUrl!: []
  @Provide() imgList:any=[]
  beforeAvatarUpload(file:any) {
    // const isJPG = file.type === 'image/png';
    const isLt2M = file.size / 1024 / 1024 < 5;

    // if (!isJPG) {
    //   this.$message.error('上传头像图片只能是 png 格式!');
    // }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 5MB!');
    }
    return isLt2M;
  }
  handleRemove(file, fileList) {
    console.log(file, fileList);
  }
  handleAvatarSuccess(res:any, file:any) {
    let img = res.data.img_url;
    let a={url:'',order:'',is_main:''}
    a.url=img
    this.imgList.push(a)
    this.$emit('bindSendImgList',this.imgList)//将图片路径传递给父组件
  }
  created() { 
    this.imgList=this.imgUrl
  }
}
</script>
